<template>
    <div class="pe-alert" :class="[`pe-alert-${effect}-${type}`]"
        :style="{ justifyContent: center ? 'center' : '' }">
        <div v-if="showIcon" class="pe-alert-icon">
            <Success v-if="type === 'success'" />
            <Info v-if="type === 'info'" />
            <Warning v-if="type === 'warning'" />
            <Error v-if="type === 'error'" />
        </div>
        <div class="pe-alert-title">
            <slot name="title">
                {{ title }}
            </slot>
        </div>
        <div v-if="description || useSlots().default">
            <slot>
                {{ description }}
            </slot>
        </div>
        <div v-if="closable" class="pe-alert-close" @click="onClose">
            <template v-if="closeText">
                {{ closeText }}
            </template>
            <Close v-else />
        </div>
    </div>
</template>

<script setup lang="ts">
import { useSlots } from "vue";
import Close from "../../icons/close.vue";
import Success from "../../icons/success.vue";
import Info from "../../icons/info.vue";
import Warning from "../../icons/warning.vue";
import Error from "../../icons/error.vue";

/**
 * @param title Alert 标题
 * @param type Alert 类型
 * @param description 描述性文本
 * @param closable 是否可以关闭
 * @param center 文字是否居中
 * @param close-text 自定义关闭按钮文本
 * @param show-icon 是否显示类型图标
 * @param effect 主题样式
 */
interface Props {
    title?: string,
    type?: 'success' | 'warning' | 'info' | 'error',
    description?: string,
    closable?: boolean,
    center?: boolean,
    closeText?: string,
    showIcon?: boolean,
    effect?: 'light' | 'dark'
}

withDefaults(defineProps<Props>(), {
    title: "",
    type: "success",
    closable: false,
    center: false,
    showIcon: false,
    effect: "light"
})

const emits = defineEmits(["close"])

const onClose = () => {
    emits("close")
}

</script>

<script lang="ts">
export default {
    name: "pe-alert"
}
</script>